<template>
  <div class="tabs">
    <div
      v-for="(item, index) in options"
      :key="index"
      class="tabs-item"
      :class="{
        active: active === item[valueKey],
        first: index === 0,
        last: index === options.length - 1,
      }"
      @click="onChange(item[valueKey])"
    >
      {{ item[labelKey] }}
    </div>
  </div>
</template>
<script setup lang="jsx">
const active = defineModel({ type: [Number, String], default: '' })
defineOptions({ name: 'MyToggle' })
defineProps({
  options: {
    type: Array,
    default: () => [],
  },
  labelKey: {
    type: String,
    default: 'label',
  },
  valueKey: {
    type: String,
    default: 'value',
  },
})
function onChange(val) {
  active.value = val
}
</script>
<style lang="scss" scoped>
.tabs {
  display: inline-flex;
  border-radius: 4px;
  border: 1px solid #e7eaf0;
  .tabs-item {
    font-size: 14px;
    padding: 0 16px;
    font-weight: bold;
    height: 32px;
    line-height: 32px;
    cursor: pointer;
    &:hover {
      color: #0a56d8;
    }
    &.active {
      color: #0a56d8;
      position: relative;
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        height: 32px;
        width: 100%;
        border: 1px solid #0a56d8;
      }
      &.first::before {
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
      }
      &.last::before {
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
      }
    }
  }
}
</style>
